<template>
	<view class="Resume">
		<view v-for="(item,index) in photoSrc" class="photoList">
				<image :src="item" mode="aspectFill" style="width: 30%;float: left;">
				</image>
				<view class="controller">
					<button @click="downloadResume(index)" type="primary" class="downloadResume">下载简历</button>
					<button @click="deleteResume(index)" type="warn" class="deleteResume">删除简历</button>
				</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/common/config.js';
	export default {
		data() {
			return {
				photoList: [],
				photoSrc: [],
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			uni.setNavigationBarTitle({
				title: "我的简历"
			})
			this.init();
		},
		methods: {
			init() {
				uni.request({
					url: config.url + 'file/user',
					data: {
						username: uni.getStorageSync("user").username
					},
					success: (res) => {
						this.photoList = [...this.photoList, ...res.data.data];
						console.log(this.photoList);
					}
				})
				uni.showLoading({
					title: '简历加载中'
				})
				setTimeout(() => {
					uni.hideLoading();
					this.photoList.forEach((photo) => {
						console.log(photo.imageName);
						let src = config.url + 'file/download/' + photo.imageName;
						console.log(src);
						this.photoSrc.push(src);
						console.log(this.photoSrc);
					})
				}, 400)

			},
			deleteResume(id) {
				console.log("delete:");
				console.log(this.photoList[id].imageName);
				uni.showModal({
					title: '确定删除图片？',
					content: '图片删除后不可回复',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: config.url + 'file/delete',
								data: {
									username: uni.getStorageSync('user').username,
									imageName: this.photoList[id].imageName
								},
								success: (res) => {
									console.log(res.data);
									uni.showLoading({
										title: '图片删除成功！',
									})
									console.log("1321")
									console.log(this.photoList);
									console.log(this.photoSrc);
									this.photoList.splice(id, 1);
									this.photoSrc.splice(id, 1);
									console.log("====");
									console.log(this.photoList);
									console.log(this.photoSrc);
									setTimeout(() => {
										uni.hideLoading();
										this.$u.toast("图片删除成功");
									}, 500)
								}
							})
						} else if (res.cancel) {
							console.log("取消删除")
						}

					},
				})
			},
			downloadResume(id) {
				console.log(this.photoSrc[id])
				var download = document.createElement('a');
				download.href = this.photoSrc[id];
				download.download = 'media.mp4';
				this.$u.toast("图片开始下载");
				setTimeout(() => {
					download.click();
				}, 500)
			}
		}
	}
</script>


<style lang="scss">
	.Resume {
		width: 100vw;
		height: 100vh;
		background-color: orange;

		.controller {
			float: left;
			z-index: 99;
			width: 120px;
			font-size: 14px;

			button{
				// position: absolute;
				z-index: 99;
				margin: 20rpx;
			}
		}

		image {
			float: left;
			margin: 20rpx 0px 20rpx 60rpx;
			
		}
	}
</style>